<template>
    <div id="divContent" ref="divContent">
        <!-- 定义查询面板 -->
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="root.popover.form" class="search-panle" label-width="120px">                                         
                <el-form-item label="完成提醒日期>=" style="margin-bottom: 0;">
                     <el-date-picker
                        v-model="root.popover.form.overRemindTimeGreater"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="完成提醒日期<=" style="margin-bottom: 0;">
                     <el-date-picker
                        v-model="root.popover.form.overRemindTimeLess"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="浆员姓名=" style="margin-bottom: 0;">
                    <el-input v-model="root.popover.form.remindProviderName" style="width: 150px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="提醒日期>=" style="margin-bottom: -10px; margin-top: 5px;">
                     <el-date-picker
                        v-model="root.popover.form.remindDateGreater"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>                          
                <el-form-item label="提醒日期<=" style="margin-bottom: -10px; margin-top: 5px;">
                     <el-date-picker
                        v-model="root.popover.form.remindDateLess"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                 <el-form-item label="护士姓名=" style="margin-bottom: -10px; margin-top: 5px;">
                    <el-select  v-model="root.popover.form.remindNurseName"  style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option  v-for="item in root.popover.cache.nurseData" :key="item.id" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                </el-form-item> 
                    <br/>                       
                    <el-button type="primary"  @click="initDivContentTable('all')" style="float:right;margin-top: 20px;margin-right: 25px;">搜索</el-button>
                    <el-button type="primary"  @click="initDivContentTable('clear')" style="float:right;margin-top: 20px;margin-right: 15px;">刷新</el-button>
            </el-form>
                    <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>    
            
        <!-- 定义表格面板 -->
        <el-table :data="root.table.rowsData" stripe border class="company-table" style="width: 100%;" :height="outHeight" v-loading="root.table.option.loading">
                    <el-table-column prop="remindProviderName" label="浆员姓名" sortable min-width="90">
                    </el-table-column>
                    <el-table-column prop="remindDate" label="提醒日期" sortable min-width="120">
                         <template slot-scope="scope">
                             <div v-html="timestampToTime(scope.row.remindDate,'yyyy-mm-dd')"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nextCollDate" label="下次采浆日期" sortable min-width="120">
                         <template slot-scope="scope">
                             <div v-html="timestampToTime(scope.row.nextCollDate,'yyyy-mm-dd')"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="overRemindTime" label="完成提醒时间" sortable min-width="120">
                         <template slot-scope="scope">      
                             <div  v-if="(scope.row.overRemindTime!=null&&scope.row.overRemindTime!='undefined')" v-html="timestampToTime(scope.row.overRemindTime,'yyyy-mm-dd')"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="overConsumTime" label="完成提醒用时" sortable min-width="120">
                    </el-table-column>
                    <el-table-column prop="remindNurseName" label="护士姓名" sortable min-width="90">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                        <template slot-scope="scope">
                            <el-button  @click="editButtonEventFun('edit',scope.row)" type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
        </el-table>
        <el-pagination background @size-change="xyRemindSizeChange" @current-change="xyRemindCurrentChange" :current-page="root.table.pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="root.table.pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="root.table.pagination.total"></el-pagination>    

        <!-- 定义弹窗 -->
        <div style="width:100%;">
        <el-dialog  :title="root.dialog.config.title" :visible.sync="root.dialog.config.isShow"  @close="closeDialog" :close-on-click-modal="false" top="2vh" width="55%" v-dialogDrag style="margin-top: -25px;"> 
            <div :style="root.dialog.height"> 
                <h3  class="dialog-plate-title"><span>浆员信息</span></h3>
                <pulpworkInfo :cardid="root.dialog.pulpworkInfo.cardid" :datatype="root.dialog.pulpworkInfo.datatype" style="width:100%"></pulpworkInfo>
                <h3  class="dialog-plate-title"><span>提醒信息</span></h3>
                <el-form :inline="true" :model="root.dialog.form" class="demo-ruleForm" label-width="100px">                                         
                    <el-form-item label="提醒日期" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.remindDate" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="下次献浆日期" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.nextCollDate" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item label="完成提醒日期" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.overRemindTime" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="完成提醒用时" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.overConsumTime" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item label="备注" style="margin-top: 5px;">
                        <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="root.dialog.form.remindFeeback"
                        maxlength="1500"
                        show-word-limit
                        style="width: 600px;"
                        >
                        </el-input>
                    </el-form-item>
                <h3  class="dialog-plate-title"><span>上次回访信息</span></h3>
                    <el-form-item label="回访记录" style="margin-top: 5px;">
                        <el-input
                        type="textarea"
                        placeholder="无回访记录"
                        v-model="root.dialog.form.returnVisitRecored"
                        maxlength="1500"
                        show-word-limit
                        style="width: 600px;"
                        disabled
                        >
                        </el-input>
                    </el-form-item>
                <h3  class="dialog-plate-title"><span>提醒项</span></h3>
                    <el-form-item label="" style="margin-top: 5px;">
                       <el-checkbox-group v-model="root.dialog.form.jzInfoDataItem" >
                            <el-checkbox v-for="item in root.dialog.cache.jzInfoDataItem" :label="item.name" :key="item.name">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                <h3  class="dialog-plate-title" style="margin-top: 1px;"><span>浆员反馈</span></h3>
                    <el-form-item label="" style="margin-top: 5px;">
                       <el-checkbox-group v-model="root.dialog.form.jzInfoDataResponse">
                            <el-checkbox v-for="item in root.dialog.cache.jzInfoDataResponse" :label="item.name" :key="item.name">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="护士" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.remindNurseName" style="width: 120px;" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="预计献浆时间" style="margin-top: 5px;">
                        <el-date-picker
                            v-model="root.dialog.form.estimateCollDate"
                            type="date"
                            placeholder="选择日期"
                            style="width: 150px;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="提醒状态" style="margin-top: 5px;">
                        <el-select v-model="root.dialog.form.remindStatus" placeholder="请选择" style="width: 120px;">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button  type="primary" style="margin-top: 5px;margin-left:6px;" @click="updateButtonEventFun">提交</el-button>
                </el-form>
            </div>
        </el-dialog>
        </div>
    </div>
</template>
<script>
import bloodSourcesHttp from 'plugins/axios/bloodSourcesHttp.js';
import api from 'plugins/axios/api.js';
import analysisHttp from 'plugins/axios/analysisHttp.js';
import pulpworkInfo from 'views/operationManage/components/pulpworkInfo.vue';
//定义被webpack导出去的VUE json对象
let exportedVue = {
    data(){
        return{
            root:{
                popover:{
                    cache:{
                        nurseData:[],
                    },
                    form:{
                            overRemindTimeLess:null ,
                            overRemindTimeGreater:null ,
                            remindDateLess:null,
                            remindDateGreater:null,
                            remindNurseName:null,
                            remindProviderName:null
                    }
                },
                table:{
                    option:{
                        loading:true
                    },
                    rowsData:[],
                    pagination:{
                        currentPage:1,
                        pageSize:10,
                        total:0
                    }
                },
                dialog:{
                    cache:{
                        jzInfoDataResponse:[],
                        jzInfoDataItem:[],
                    },
                    config:{
                        title:null,
                        isShow:false,
                    },
                    height:{
                        height: document.documentElement.clientHeight - 90+ 'px',
                        overflowY: 'auto',
                        width:'100%'
                    },
                    pulpworkInfo:{
                        cardid:null,
                        datatype:null
                    },              
                    form:{
                        remindDate:null,
                        nextCollDate:null,
                        overRemindTime:null,
                        overConsumTime:null,
                        returnVisitRecored:null,
                        cardId:null,
                        estimateCollDate: null,
                        id: null,
                        remindFeeback: null,
                        remindNurseDeptId: null,
                        remindNurseId: null,
                        remindNurseName: "",
                        remindProject: null,
                        remindProviderId: null,
                        remindProviderName: "",
                        remindStatus: null,
                        remindSubmit: null,
                        remindWay: null,
                        jzInfoDataItem:[],
                        jzInfoDataResponse:[],
                    },
                    timer:{
                        alarmClock:null,
                        hour:0,
                        min:0,
                        second:0,
                        textHour:'0',
                        textMin:'0',
                        textSecond:'0',
                    },
                },
            }
        }
    },
    props:['remindStatus'],
    created(){},
    mounted(){
        let self = this;
       //初始化数据
       self.initData(); 
    },
    components:{pulpworkInfo},
    watch:{
        'root.dialog.timer.second'(oldVal,newVal){
            let self = this;
            if(oldVal==59){
                self.root.dialog.timer.second=0;
                self.root.dialog.timer.min++;
            }else{
                if(self.root.dialog.timer.second<10){
                    self.root.dialog.timer.textSecond='0'+self.root.dialog.timer.second;
                }else{
                    self.root.dialog.timer.textSecond = self.root.dialog.timer.second;
                }
            }
            self.root.dialog.form.overConsumTime =  self.root.dialog.timer.textHour+"小时"+ self.root.dialog.timer.textMin+"分"+ self.root.dialog.timer.textSecond+"秒";
        },
        'root.dialog.timer.min'(oldVal,newVal){
            let self = this;
            if(oldVal==59){
                self.root.dialog.timer.min=0;
                self.root.dialog.timer.hour++; 
            }else{
                if(self.root.dialog.timer.min<10){
                    self.root.dialog.timer.textMin='0'+self.root.dialog.timer.min;
                }else{
                    self.root.dialog.timer.textMin=self.root.dialog.timer.min;     
                }
            }
        },
        'root.dialog.timer.hour'(oldVal,newVal){
            if(oldVal==100){
                self.root.dialog.timer.hour=0;
            }else{
                if(self.root.dialog.timer.hour<10){
                    self.root.dialog.timer.textHour='0'+self.root.dialog.timer.hour;
                }else{
                    self.root.dialog.timer.textHour=self.root.dialog.timer.hour;
                }
            }
        },
        "$route"(oldVal,newVal){
            this.initDivContentTable('clear');
        }       
    },
    computed:{
          outHeight(){//外部表格高度
                return this.$store.state.clientHeight-184;
             }
    },
    methods:{
        //初始化数据
        initData(){
            let self = this;
            //缓存初始化
            self.initCache();
            //表格数初始化查询
            self.initDivContentTable();
        },
        //缓存初始化
        initCache(){
            let self = this;
            //所有护士信息 此处依赖统计模块的查询所有护士接口，如果该处报错或护士信息未查询到，请核对统计模块后端接口是否启动
            analysisHttp.getAllNurse({isCollNurse:false}).then(res=>{
                self.root.popover.cache.nurseData = res.content;
            });
            //浆站基础信息缓存 提醒信息
            api.getCodeDataByCodeType('remind_item').then(res=>{
                self.root.dialog.cache.jzInfoDataItem = res.content;
            });
            //浆站基础信息缓存 反馈信息
            api.getCodeDataByCodeType('remind_response').then(res=>{
                self.root.dialog.cache.jzInfoDataResponse = res.content;
            });
        },
        //表格数据初始化查询
        initDivContentTable(type){
            let self  = this;
                 if(type==='clear'){
                    self.clearSearch();
                 }
            let params={
                currentPage:self.root.table.pagination.currentPage,
                pageSize:self.root.table.pagination.pageSize,
                overRemindTimeLess:self.root.popover.form.overRemindTimeLess ,
                overRemindTimeGreater:self.root.popover.form.overRemindTimeGreater ,
                remindDateLess:self.root.popover.form.remindDateLess,
                remindDateGreater:self.root.popover.form.remindDateGreater,
                remindNurseName:self.root.popover.form.remindNurseName,
                remindProviderName:self.root.popover.form.remindProviderName,
                remindStatus:self.remindStatus==1?self.remindStatus:2                 
            };
            bloodSourcesHttp.getTableXyRemind(params).then(res=>{
                self.root.table.rowsData = res.content.items;
                self.root.table.pagination.total = res.content.total;
                self.root.table.option.loading = false;
            });
        },
        //点击表格分页每页显示多少条数据处理
        xyRemindSizeChange(size){
            let self = this;
            self.root.table.pagination.pageSize = size;
            self.initDivContentTable();
        },
        //点击表格分页页数处理
        xyRemindCurrentChange(currentPage){
            let self = this;
            self.root.table.pagination.currentPage = currentPage;
            self.initDivContentTable();
        },
        //清空查询框所有查询条件
        clearSearch(){
            let self = this;
            self.root.popover.form.overRemindTimeLess=null;
            self.root.popover.form.overRemindTimeGreater=null;
            self.root.popover.form.remindDateLess=null;
            self.root.popover.form.remindDateGreater=null;
            self.root.popover.form.remindNurseName=null;
            self.root.popover.form.remindProviderName=null;
        },
        //编辑按钮事件处理
        editButtonEventFun(type,row){
            let self = this;
            self.setTableRowValToFormVal(row);
        },
        //点击编辑按钮将表单行值赋值给对应的表单项
        setTableRowValToFormVal(row){
            let self = this;
            //打开dialog
            self.root.dialog.config.isShow = true;
            //设置基础性组件查询接口类型 datatype='provider' 表示从浆员基础信息表查询 provider_info 数据库表查询
            self.root.dialog.pulpworkInfo.datatype='provider';
            //通过浆员的卡号 cardid=row.cardId 进行符合条件卡号的数据查询展示
            self.root.dialog.pulpworkInfo.cardid=row.cardId;
            //进行表格行[tablerow]数据赋值给弹窗回显的表单[form]
            self.root.dialog.form = row;
            self.root.dialog.form.remindDate=(row.remindDate==null||row.remindDate==='undefined'||row.remindDate==='')?self.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'):self.timestampToTime(row.remindDate,'yyyy-mm-dd');
            self.root.dialog.form.nextCollDate=(row.nextCollDate==null||row.nextCollDate==='undefined'||row.nextCollDate==='')?self.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'):self.timestampToTime(row.nextCollDate,'yyyy-mm-dd');
            self.root.dialog.form.overRemindTime=(row.overRemindTime==null||row.overRemindTime==='undefined'||row.overRemindTime==='')?self.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'):self.timestampToTime(row.overRemindTime,'yyyy-mm-dd');
            self.root.dialog.form.overConsumTime=row.overConsumTime;
            self.root.dialog.form.remindNurseName=row.remindNurseName;
            self.root.dialog.form.returnVisitRecored=row.returnVisitRecored;
            if(self.root.dialog.form.remindStatus==1){
               self.root.dialog.form.remindStatus='1';
            }
            if(self.root.dialog.form.remindStatus==2){
               self.root.dialog.form.remindStatus='2';
            }
            if(self.root.dialog.form.jzInfoDataItem==null||self.root.dialog.form.jzInfoDataItem===""||self.root.dialog.form.jzInfoDataItem==="undefined"){
                self.root.dialog.form.jzInfoDataItem = [];
            }else{
                 self.root.dialog.form.jzInfoDataItem = self.root.dialog.form.jzInfoDataItem.split(",");
            }
            if(self.root.dialog.form.jzInfoDataResponse==null||self.root.dialog.form.jzInfoDataResponse===""||self.root.dialog.form.jzInfoDataResponse==="undefined"){
                self.root.dialog.form.jzInfoDataResponse = [];
            }else{
                self.root.dialog.form.jzInfoDataResponse = self.root.dialog.form.jzInfoDataResponse.split(",");
            }
            debugger;
            //调用处理用时的计时器
            if(self.root.dialog.form.overConsumTime!=null&&self.root.dialog.form.overConsumTime!='undefined'&&self.root.dialog.form.overConsumTime!=""){

            }else{
                self.setTimeForOperation();
            }

        },
        //动态设置用时计时器
        setTimeForOperation(){
            let self = this;
            //1秒钟调用一次
            self.root.dialog.timer.alarmClock = window.setInterval(self.setTimeForSecond,1000);
        },
        //按秒计算时间
        setTimeForSecond(){
            let self = this;
            self.root.dialog.timer.second++;    
            console.log(self.root.dialog.form.overConsumTime);
        },
        //关闭弹窗之前 closeDialog
        closeDialog(){
            let self = this;
            self.root.dialog.timer.hour=0;
            self.root.dialog.timer.min=0;
            self.root.dialog.timer.second=0;
            window.clearInterval(self.root.dialog.timer.alarmClock)
        },
        //处理多选项change事件
        handleCheckedCitiesChange(value){
            let self = this;
            //暂无处理
        },
        //更新信息提醒信息
        updateButtonEventFun(){
            let self = this;
            //进行数据转化
            var params=self.root.dialog.form;
            var newObject = new Object();
            //处理2个数组
                newObject.jzInfoDataItem =  self.root.dialog.form.jzInfoDataItem.join(',') ;
                newObject.jzInfoDataResponse = self.root.dialog.form.jzInfoDataResponse.join(',') ;
                params.jzInfoDataItem = newObject.jzInfoDataItem ;
                params.jzInfoDataResponse = newObject.jzInfoDataResponse;
            //处理时间
            params.estimateCollDate = this.timestampToTime(new Date(params.estimateCollDate),'yyyy-mm-dd HH:mm:ss');
            params.overRemindTime = (params.overRemindTime==null||params.overRemindTime=='undefined'||params.overRemindTime==='')?this.timestampToTime(new Date(),'yyyy-mm-dd HH:mm:ss'):params.overRemindTime;
            //进行编辑数据提交
            bloodSourcesHttp.updateXyRemindInfo(params).then(res=>{
                 if(res.content){
                     self.$message({
                                    message: '提醒成功！',
                                    type: 'warning'
                                }); 
                        //关闭
                        self.root.dialog.config.isShow = false;
                        //刷新表单
                        self.initDivContentTable('clear');
                        //关闭定时器
                        self.closeDialog();
                    }else{
                     self.$message({
                                    message: '提醒失败！',
                                    type: 'warning'
                                }); 
                    }
            });
        },

    }
}
export default exportedVue;
</script>
<style lang="stylus" scoped>
    .divContent 
        position relative        
</style>
<style scoped>
</style>

